<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="page-top">
    <div class="page-content">
      <h2>任务计划列表</h2>
    </div>
  </div>
  <div class="main" id="todolist">
    <h3 class="big-title">添加任务：</h3>
    <input placeholder="例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务" class="task-input" type="text" v-on:keyup.enter="add" v-model="addInp"/>
    <ul class="task-count">
      <li>2个任务未完成</li>
      <li class="action">
        <a class="active" href="#">所有任务</a>
        <a href="#">未完成的任务</a>
        <a href="#">完成的任务</a>
      </li>
    </ul>
    <h3 class="big-title">任务列表：</h3>
    <div class="tasks">

      <span class="no-task-tip">还没有添加任何任务</span>
      <ul class="todo-list">



        <li class="todo" v-for="(item,index) in listItems" v-bind:class="{completed:item.isCompleted}" @dblclick="ond(index)">
          <div class="view">
            <input class="toggle" type="checkbox" v-model="item.isCompleted"/>
            <label>{{item.title}}</label>
            <button class="destroy" @click="del(index)"></button>
          </div>
        </li>

      </ul>
      <input type="text"  v-show="isLogin" v-on:keyup.enter="pop" v-model="can">
    </div>
  </div>
 <script src="vue.js"></script>
  <script src="index.js"></script>
</body>

</html>
